<template>
	<view class="cardstyle" :style="{'background-color':bgColor}">
		<view style="display: flex; gap: 15rpx; margin-bottom: 15rpx;">
			<view class="image-box" v-if="mode==2" style="width: 120rpx; height: 120rpx; flex-shrink: 0;">
				<image :src="showImage" @error="handleImageError(0)"></image>
			</view>
			<view>
				<text v-if="mode == 3" style="color: #f00;">{{title}}</text>
				<text class="titlebox" style="margin-bottom: 0; flex: 1;">{{title}}</text>
			</view>
		</view>
		<view class="tipsbox">
			<text v-if="isTop" style="color: #f00;">置顶</text>
			<text>{{author}}</text>
			<text>{{Comment}}</text>
			<view style="flex: 1; display: flex; justify-content: flex-end;">
				<text>{{time}}</text>
			</view>
		</view>
		<slot name="tips"></slot>
	</view>
</template>
<script>
	export default {
		name: "cardViewText",
		props: {
			title: {
				type: String,
				default: ""
			},
			isTop: {
				type: Boolean,
				default: false
			},
			author: {
				type: String,
				default: ""
			},
			Comment: {
				type: String,
				default: ""
			},
			time: {
				type: String,
				default: ""
			},
			mode: {
				type: Number,
				default: 1,
				required: true
			},
			images: {
				type: Array,
				default: () => []
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			}
		},
		data() {
			return {
				// title:"公司大股东回购东方红饭店和",
				// isTop:true,
				// author:"新华社",
				// Comment:56,
				// time:"2025.10.29"
				defaultPic: "/static/无图片.png",
				status: ""
			};
		},
		computed: {
			showImage() {
				return this.images[0] || this.defaultPic;
			},
			authorColor() {
				const colorMap = {
					news: '#aaa',
					ad: '#00f',
				};
				return {
					color: colorMap[this.status] || '#f33',
				};
			}
		},
		mounted() {
			console.log("NewsCardView-------mounted" + this.title);
			if (this.mode == 3) {
				this.status = "ad"; // 现在 status 已在 data 中声明，可正常赋值
			}
		},
		methods: {
			handleImageError(index) {
				console.log("handleImageError------->index:" + index + ", title:" + this.title);
				// 修复：$set 语法（目标对象、属性名、索引、新值），使用 defaultPic 作为失败图
				this.$set(this.images, index, this.defaultPic);
			}
		}
	};
</script>

<style>
	.cardstyle {
		background-color: #dadada;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	/* 图片容器：控制宽高和圆角 */
	.image-box {
		width: 100%;
		height: 300rpx;
		/* 可根据需求调整高度 */
		border-radius: 8rpx;
		overflow: hidden;
		/* 避免图片超出圆角 */
		margin-bottom: 15rpx;
		/* 与标题保持间距 */
	}

	/* 图片：填充容器且不变形 */
	.image-box image {
		width: 100%;
		height: 100%;
	}

	.titlebox {
		font-weight: 600;
		font-size: 40rpx;
		display: block;
		margin-bottom: 15rpx;
	}

	.tipsbox {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		gap: 20rpx;
	}
</style>